<template>
    <div class="aside">
      <ul class="menu">
        <li> <router-link to="/home/user">用户管理</router-link></li>
        <li> <router-link to="/home/right">权限管理</router-link></li>
        <li> <router-link to="/home/goods">商品管理</router-link></li>
        <li> <router-link to="/home/order">订单管理</router-link></li>
        <li> <router-link to="/home/setting">系统管理</router-link></li>
      </ul>
    </div>
  </template>
  
  <script>
import router from '@/router';

  export default {
    name: 'MyAside',
    components: { router }
};
    
  </script>
  <style scoped>
 .aside{
    float: left;
    width:250px;height: 100%;border: 1px solid #eaeaea;
    .menu{list-style-type:none;padding: 0;margin: 0;}
    .menu li{line-height: 50px;font-weight: bold;}
    .menu li:hover{background-color: #efefef;cursor: pointer;}
    .menu li a{display: block;color: black;padding-left: 30px;}
    .menu li a:hover{text-decoration: none;}
    /* .royter-link-active: vue自带的类,表示router-link选中时的样式,高亮显示 */
    .router-link-active{
        background-color: #efefef;
        box-sizing: border-box;
        position: relative;
    }
    /* 实现选中路由的绿色小方块效果 */
    /* before 伪元素,在某元素前插入一个虚拟元素,常用于实现某些样式效果 */
    .router-link-active::after{
        content: "";
        display: block;
        width: 4px;
        height: 100%;
        position: absolute;left:0;top:0;
        background-color: #42b983;
    }
 }
  </style>